<template>
	<eui-page-frame topHeight="220" :withOutBorder="true" bottomHeight="10">
		<template #top>
			<view class="content-img">
				<eui-nav-bar title="人员选择" color="#333" rightIcon="" />
				<eui-search-bar v-model="searchValue" @confirm="selStoreById" @clear="clearInput" radius="100"
					placeholder="请输入编号/名称">
				</eui-search-bar>
			</view>
		</template>
		<eui-page-content>
			<view class="main-view">
				<view class="main-view-bg" style="margin-bottom:20rpx">
					<view class="content-title ">
						最近选择
					</view>
					<view v-if="historySelect.length>0" class="padding-left-28 font-size-28 flex flex-direction-column"
						v-for="(item,index) in historySelect" :key="index" @click="setSelBackItem(item)"
						:class="item.c_checked && IsMult == '否'?'store-checked':''">
						<view class="sroll-store-list flex">
							<view class="flex align-items-center margin-right-10" v-if="IsMult == '是'">
								<checkbox value="cb" :checked="item.c_checked" @click.stop="setSelBackItem(item)"
									style="transform:scale(0.6)" />
							</view>
							<view>
								<view class="userinfo">[{{item.c_userno}}]{{item.c_username}}</view>
								<view class="flex" style="margin-top: 8rpx;font-size: 20rpx;line-height: 28rpx;">
									<view>
										<span class="color-888">在线 </span>
									</view>
									<view class="margin-left-20">
										<span class="color-888">未完成任务数</span>
										<span class="color-000">{{item.c_task_count}}个</span>
									</view>
									<view class="margin-left-20">
										<span class="color-888">时长</span>
										<span class="color-000">{{item.c_task_time}}分钟</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
						<view class="no-data-text">暂无数据</view>
					</view>
				</view>
				<view class="main-view-bg footer-view">
					<view class="content-title ">
						可选人员
					</view>
					<!-- <scroll-view scroll-y style="height: 100%;"> -->
					<view v-if="dateList.length>0" class="padding-left-28 font-size-28 flex flex-direction-column"
						v-for="(item,index) in dateList" :key="index" @click="setSelBackItem(item)"
						:class="item.c_checked && IsMult == '否'?'store-checked':''">
						<view class="sroll-store-list flex">
							<view class="flex align-items-center margin-right-10" v-if="IsMult == '是'">
								<checkbox value="cb" :checked="item.c_checked" @click.stop="setSelBackItem(item)"
									style="transform:scale(0.6)" />
							</view>
							<view>
								<view class="userinfo">[{{item.c_userno}}]{{item.c_username}}</view>
								<view class="flex" style="margin-top: 8rpx;font-size: 20rpx;line-height: 28rpx;">
									<view>
										<span class="color-888">在线 </span>
									</view>
									<view class="margin-left-20">
										<span class="color-888">未完成任务数</span>
										<span class="color-000">{{item.c_task_count}}个</span>
									</view>
									<view class="margin-left-20">
										<span class="color-888">时长</span>
										<span class="color-000">{{item.c_task_time}}分钟</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
						<view class="no-data-text">暂无数据</view>
					</view>
					<!-- </scroll-view> -->
					<view class="user-footer flex-1 flex" v-if="IsMult=='是'">
						<!-- <eui-button type="primary" title="确定" @click="BackMultParm" singleTag="primary_主按钮" /> -->
						<view class="flex-1 flex" style="padding-right: 7.5px;" @click="CancelCondition">
							<view class="flex-1 flex justify-content-center align-items-center bottom-bg"
								style="border: solid 1px rgba(136, 136, 136, 1);font-size: 15px;">取消</view>
						</view>
						<view class="flex-1 flex justify-content-center align-items-center" style="padding-left: 7.5px;"
							@click="BackMultParm">
							<view class="flex-1 flex justify-content-center align-items-center bottom-bg"
								style="background: linear-gradient(135deg, rgba(2, 183, 230, 1), rgba(54, 169, 243, 1));color: #fff;font-size: 15px;">
								确认</view>
						</view>
					</view>
				</view>
			</view>
		</eui-page-content>
	</eui-page-frame>


</template>

<script setup type="ts">
	import { ref,onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import service from '@/common/service';
	import Enjoy from '@/common/enjoy';
	import { useMainStore } from '@/store/modules/store';
	const mainStore = useMainStore();
	const { loginInfo } = mainStore;
	import useService from '@/hooks/useService';
	const mainService = useService({ prefix: "mainApi" });

	const searchValue = ref('');
	const IsMult = ref('否');
	const taskId = ref('');
	const selectType = ref('');  //转单，指派  群组
	const SelectedItems = ref("");
	const triggered = ref(false);
	const WhereList = ref([]);
	const allList = ref([]);
	const dateList = ref([]);
	const historyList = ref([]);
	const historySelect = ref([]);
	const allhistorySelect = ref([]);
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 20 + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight -150 +'px');


	const selStoreById =(e)=>{
		dateList.value = [];
		if(searchValue.value===''){
			dateList.value = allList.value;
			historySelect.value = allhistorySelect.value;
		}
		else{
			dateList.value = allList.value.filter(x=> x.c_userno===searchValue.value || x.c_username===searchValue.value);
			historySelect.value = allhistorySelect.value.filter(x=> x.c_userno===searchValue.value || x.c_username===searchValue.value);
		}
	}
	const clearInput = ()=>{
		searchValue.value='';
		dateList.value = allList.value;
		historySelect.value = allhistorySelect.value;
	}
	const setSelBackItem = (e)=>{
		if(IsMult.value == '否'){
			let parms = {
				Key: e.c_userno,
				Value: e.c_username,
			}
			const list = historyList.value.filter(x=>x.c_userno===e.c_userno)
			if(list.length===0)
			{
				if(historyList.value.length>=3){
					historyList.value.shift();
				}
				historyList.value.push({c_userno:e.c_userno,c_username:e.c_username})
				service.setStorageSync('TaskSelUser_'+ loginInfo.sUser, JSON.stringify(historyList.value));
			}
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			prevPage.$vm.$.exposed.SelectionChanged(selectType.value,parms); //执行函数也是同理
			CancelCondition()
		}else{
			e.c_checked = !e.c_checked;
		}
	}
	const CancelCondition = () =>{
		uni.navigateBack({
			delta: 1
		});
	}
	// 多选情况下处理选中的数据以及返回处理
	const BackMultParm = () =>{
		let cKey = [];
		let cValue = [];
		for (let i = 0; i < dateList.value.length; i++) {
			if(dateList.value[i].c_checked){
				cKey.push(dateList.value[i].c_userno);
				cValue.push(dateList.value[i].c_name);
			}
		}
		if(cKey.length==0){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: '请先选择人员!',
			});
			return false;
		}
		let parms = {
			Key: cKey.toString(),
			Value: cValue.toString(),
		}
		let pages = getCurrentPages(); //获取所有页面栈实例列表
		let prevPage = pages[pages.length - 2]; //上一页页面实例
		prevPage.$vm.$.exposed.SelectionChanged(selectType.value, parms); //执行函数也是同理
		CancelCondition()
	}

	//指派人员选择
	const FetchTargetRoleUsers = async() =>{

		uni.showLoading({ title: "正在加载...", mask: true });
		const res = await mainService.request('taskallot', 'FetchTargetRoleUsers', {
					TaskId:taskId.value
				});
		uni.hideLoading();
		if (res) {
			const list = res;
			if (list && list.length > 0) {
				let selD = [];
				if(SelectedItems.value){
					selD = SelectedItems.value.split(',');
				}
				for (let i = 0; i < list.length; i++) {
					if(list[i].c_name != 'Group'){
						if(selD.length>0){
							let cN = 0;
							for (let bb = 0; bb < selD.length; bb++) {
								if(list[i].c_id==selD[bb]){
									cN+=1;
								}
							}
							dateList.value.push({
								...list[i],
								c_checked:cN>0?true:false
							});
						}else{
							dateList.value.push({
								...list[i],
								c_checked:false
							});
						}
					}
				}

			}
		}
		// if(dateList.value.length===0){
		// 	dateList.value= [
		// 		{
		// 			c_userno:'0157',
		// 			c_username:'刘凯华',
		// 			c_task_count:4,
		// 			c_task_time:32
		// 		},
		// 		{
		// 			c_userno:'0378',
		// 			c_username:'徐高平',
		// 			c_task_count:2,
		// 			c_task_time:50
		// 		},
		// 		{
		// 			c_userno:'0389',
		// 			c_username:'李文爽',
		// 			c_task_count:5,
		// 			c_task_time:75
		// 		},
  //       {
  //         c_userno:'0720',
  //         c_username:'杨思浩',
  //         c_task_count:5,
  //         c_task_time:75
  //       },
		// 		{
		// 			c_userno:'0401',
		// 			c_username:'罗容',
		// 			c_task_count:6,
		// 			c_task_time:90
		// 		}
		// 	]
		// }
		allList.value = dateList.value;
	}
	//转交人员选择
	const FetchTransmitToUsers = async()=>{
		uni.showLoading({ title: "正在加载...", mask: true });
		const res = await mainService.request('tasktodo', 'FetchTransmitToUsers', {
					TaskId:taskId.value
				});
		uni.hideLoading();
		if (res) {
			const list = res;
			if (list && list.length > 0) {
				let selD = [];
				if(SelectedItems.value){
					selD = SelectedItems.value.split(',');
				}
				for (let i = 0; i < list.length; i++) {
					if(list[i].c_name != 'Group'){
						if(selD.length>0){
							let cN = 0;
							for (let bb = 0; bb < selD.length; bb++) {
								if(list[i].c_id==selD[bb]){
									cN+=1;
								}
							}
							dateList.value.push({
								...list[i],
								c_checked:cN>0?true:false
							});
						}else{
							dateList.value.push({
								...list[i],
								c_checked:false
							});
						}
					}
				}
			}
		}
		// if(dateList.value.length===0){
		// 	dateList.value= [
		// 			{
		// 				c_userno:'0157',
		// 				c_username:'刘凯华',
		// 				c_task_count:4,
		// 				c_task_time:32
		// 			},
		// 			{
		// 				c_userno:'0378',
		// 				c_username:'徐高平',
		// 				c_task_count:2,
		// 				c_task_time:50
		// 			},
		// 			{
		// 				c_userno:'0389',
		// 				c_username:'李文爽',
		// 				c_task_count:5,
		// 				c_task_time:75
		// 			},
  //         {
  //           c_userno:'0720',
  //           c_username:'杨思浩',
  //           c_task_count:5,
  //           c_task_time:75
  //         },
		// 			{
		// 				c_userno:'0401',
		// 				c_username:'罗容',
		// 				c_task_count:6,
		// 				c_task_time:90
		// 			}
		// 	]
		// }
		allList.value = dateList.value;
	}

	onLoad(async (option) => {
		if(option&&option.IsMult){
			IsMult.value = option.IsMult;
			setTimeout(function() {
				uni.getSystemInfo({
					success: function(res) {
						const userInfoPage = uni.createSelectorQuery().select(".content-img");
						userInfoPage.boundingClientRect(function(data) {
							if(option.IsMult=='否'){
								scrollHeight.value = (res.windowHeight - data.height - 40 - uni.getSystemInfoSync().safeAreaInsets.bottom)+'px';
							}else{
								scrollHeight.value = (res.windowHeight - data.height - 85 - uni.getSystemInfoSync().safeAreaInsets.bottom)+'px';
							}
						}).exec()
					}
				});
			}, 500);
		}
		if(option&&option.SelectedItems){
			SelectedItems.value = option.SelectedItems;
		}
		selectType.value = option.selectType;
		taskId.value = option.taskId;
		if(option.selectType==="指派"){
			await FetchTargetRoleUsers();
		}
		else{
			await FetchTransmitToUsers();
		}
		const jsonString = service.getStorageSync('TaskSelUser_'+ loginInfo.sUser)
		historyList.value = JSON.parse(jsonString) ||[];
		historySelect.value = dateList.value.filter(x=>historyList.value.find(y=>y.c_userno===x.c_userno));
		allhistorySelect.value = historySelect.value;
	})

</script>

<style lang="scss" scoped>
	@import '../../../../main.scss';

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.margin-top-20 {
		margin-top: 20rpx;
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.padding-left-28 {
		padding-left: 28rpx;
	}

	.content-img {
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		width: 100%;
	}

	.color-888 {
		color: rgba(136, 136, 136, 1);
		font-size: 20rpx;
	}

	.color-000 {
		color: #000000;
		font-size: 20rpx;
		font-weight: 600;
		line-height: 28rpx;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		padding: 20rpx;
		background-color: #f2f2f2;
	}

	.main-view-bg {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;
	}

	.sroll-store-list {
		padding: 20rpx 28rpx 20rpx 0;
		border-bottom: solid 1px rgba(238, 238, 238, 1);
		line-height: 1;
	}

	.userinfo {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 39rpx;
		text-align: left;
		font-style: normal;
	}

	.font-size-28 {
		font-size: 28rpx;
	}

	.store-checked {
		background-color: rgba(249, 250, 252, 1) !important;
	}

	.user-footer {
		position: fixed;
		z-index: 9;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 28rpx;
	}

	.margin-right-10 {
		margin-right: 10rpx;
	}

	.margin-left-20 {
		margin-left: 20rpx;
	}

	.justify-content-center {
		justify-content: center;
	}

	.bottom-bg {
		height: 40px;
		border-radius: 20px;
	}

	.align-items-center {
		align-items: center;
	}

	.content-title {
		font-size: 30rpx;
		color: #000000;
		line-height: 42rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
		padding: 0rpx 0rpx 0rpx 28rpx;
	}

	.image-min {
		width: 100%;
		height: 150rpx;
		opacity: 0.6;
	}

	.no-data-text {
		text-align: center;
		color: #cccccc;
		font-size: 24rpx;
		margin-top: -20rpx;
	}
</style>
